<template>
    <div class="article-list">
        <el-empty v-if="props.arr.length === 0" description="暂无文章" />

        <div v-else class="article-items">
            <el-card v-for="item in props.arr" :key="item.id" class="article-item" shadow="hover"
                @click="goToDetail(item.id)">
                <div class="item-content">
                    <div class="item-left">
                        <el-image :src="item.src" :alt="item.title" fit="cover" class="item-image" lazy>
                            <template #error>
                                <div class="image-error">
                                    <el-icon>
                                        <Picture />
                                    </el-icon>
                                </div>
                            </template>
                        </el-image>
                    </div>

                    <div class="item-right">
                        <h3 class="item-title">{{ item.title }}</h3>

                        <div class="item-excerpt" v-html="item.content"></div>

                        <div class="item-meta">
                            <span class="meta-tag">
                                <el-icon>
                                    <Collection />
                                </el-icon>
                                {{ item.tag }}
                            </span>
                            <span class="meta-author">
                                <el-icon>
                                    <User />
                                </el-icon>
                                {{ item.author }}
                            </span>
                            <span class="meta-date">
                                <el-icon>
                                    <Calendar />
                                </el-icon>
                                {{ formatDate(item.createAt) }}
                            </span>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { Picture, Collection, User, Calendar } from '@element-plus/icons-vue'

interface IItem {
    id: number
    title: string
    author: string
    content: string
    createAt: string
    src: string
    tag: string
    [key: string]: string | any
}

interface Props {
    arr: Array<IItem>
}

const props = defineProps<Props>()
const router = useRouter()

const goToDetail = (id: number) => {
    router.push({ path: '/detail', query: { id } })
}

const formatDate = (dateStr: string) => {
    try {
        const date = new Date(dateStr)
        return date.toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
        })
    } catch {
        return dateStr
    }
}
</script>

<style lang="less" scoped>
@import "../assets/varable.less";

.article-list {
    .article-items {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .article-item {
        cursor: pointer;
        transition: all 0.3s;
        border-radius: 12px;
        border: none;

        &:hover {
            transform: translateX(8px);
            box-shadow: @shadow-lg;

            .item-title {
                color: @primary-color;
            }

            .item-image {
                transform: scale(1.1);
            }
        }

        :deep(.el-card__body) {
            padding: 20px;
        }
    }

    .item-content {
        display: flex;
        gap: 20px;
    }

    .item-left {
        flex-shrink: 0;
        width: 220px;
        height: 160px;
        border-radius: 8px;
        overflow: hidden;
        background: @bg-primary;

        .item-image {
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease;

            :deep(img) {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .image-error {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            background: @primary-lighter;
            color: @primary-light;

            .el-icon {
                font-size: 48px;
            }
        }
    }

    .item-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .item-title {
        font-size: 20px;
        font-weight: 600;
        color: @text-primary;
        margin-bottom: 12px;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        transition: color 0.3s;
    }

    .item-excerpt {
        color: @text-secondary;
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: auto;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;

        :deep(p) {
            margin: 0;
        }

        :deep(*) {
            font-size: 14px !important;
            line-height: 1.8 !important;
        }
    }

    .item-meta {
        display: flex;
        gap: 20px;
        align-items: center;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid @border-light;
        flex-wrap: wrap;

        span {
            display: flex;
            align-items: center;
            gap: 5px;
            color: @text-light;
            font-size: 13px;

            .el-icon {
                font-size: 14px;
            }
        }

        .meta-tag {
            color: @primary-color;
            font-weight: 500;
        }
    }
}

@media (max-width: 992px) {
    .article-list {
        .item-left {
            width: 180px;
            height: 130px;
        }

        .item-title {
            font-size: 18px;
        }
    }
}

@media (max-width: 768px) {
    .article-list {
        .item-content {
            flex-direction: column;
        }

        .item-left {
            width: 100%;
            height: 200px;
        }

        .item-title {
            font-size: 17px;
        }

        .item-meta {
            gap: 15px;
        }
    }
}

@media (max-width: 576px) {
    .article-list {
        .article-item {
            &:hover {
                transform: translateX(4px);
            }

            :deep(.el-card__body) {
                padding: 15px;
            }
        }

        .item-content {
            gap: 15px;
        }

        .item-left {
            height: 180px;
        }

        .item-title {
            font-size: 16px;
        }

        .item-excerpt {
            font-size: 13px;
        }

        .item-meta {
            gap: 10px;
            font-size: 12px;
        }
    }
}
</style>
